<template>
  <div class="scenicGuideWrapper">
    <v-header :title="title">
    </v-header>
    <!-- 导游导购列表 -->
    <scroll ref="scroll" style="overflow: hidden;height: 100%"
          :style="{height: scrollHeight + 'px'}"
          :data="guideList"
            :pullDownRefresh="true"
            :pullUpLoad="true"
            @pullingDown="onPullingDown"
            @pullingUp="onPullingUp">
            <div class="guideWrapper">
                <div class="guideItem" @click="handleGoGuideDesc(item.id)" v-for="item in guideList" :key='item.id'>
                    <div>
                        <div class="imageWrapper" :style="{backgroundImage:`url(${item.imgUrl})`}">
                        </div>
                    </div>
                    <div class="textWrapper">
                        <div class="topGuide">
                        <div>{{item.tourName}}</div>
                        <div class="rateWrapper">
                            {{item.level}}分
                        </div>
                        </div>
                        <div class="guideDesc">
                            <p>{{item.desc}}</p>
                        </div>
                        <div class="guidePrice">
                            <div class="priceWrapper">
                                ￥{{item.price}}
                            </div>
                            <div class="priceButton">
                                <button @click.stop="handleOrderGuide(item)">订购</button>
                            </div>
                        </div>
                    </div>
                </div>
                <not-data v-if="guideList.length === 0" tip="空空如也~<br>点击刷新" @handleClick="getGuideList()"></not-data>
            </div>
    </scroll>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import guideImage from '@/assets/img/default_avatar.png'
import Scroll from '@/components/scroll/scroll'
import { Rater } from 'vux'
import axios from '@/api/axiosApi'
import { mapGetters } from 'vuex'
import { localUser } from '@/assets/js/local'
import notData from '@/components/not-data/not-data'

export default {
  data () {
    return {
      title: '导游导购',
      imageUrl: guideImage,
      scrollHeight: '500',
      guideList: [],
      userId: null
    }
  },
  directives: {
  },
  components: {
    VHeader,
    Rater,
    Scroll,
    notData
  },
  mounted() {
    this.scrollHeight = window.innerHeight - 64
  },
  computed: {
    ...mapGetters(['selectedScenic'])
  },
  created() {
    this.pageNum = 1
    this.getGuideList()
    this.userId = localUser.get('id')
  },
  methods: {
    // 获取所有导游资料
    getGuideList () {
      axios.get(this, '/v1/tourismGuideOrder/getTourGuiderByScenicId?scenicId=' + this.$route.params.id, {pageNum: this.pageNum, pageSize: 10}, (data) => {
        if (data == null || data.length === 0) {
          if (this.pageNum === 1) {
            if (this.$refs.scroll) {
              this.$refs.scroll.hiddenPullDown()
            }
          } else {
            this.pageNum--
            if (this.$refs.scroll) {
              this.$refs.scroll.hiddenPullUpLoad()
            }
          }
        } else {
          if (this.pageNum > 1) {
            this.guideList = this.guideList.concat(data)
          } else {
            this.guideList = data
          }
        }
      })
    },
    onPullingUp () {
      this.pageNum++
      this.getGuideList()
    },
    onPullingDown () {
      this.pageNum = 1
      this.getGuideList()
    },
    handleGoGuideDesc (id) {
      this.$router.push('/scenicGuideDesc/' + id)
    },
    handleOrderGuide (item) {
      if (this.userId == null) {
        this.$vux.toast.text('你还没有登录哦')
        return
      }
      this.$store.commit('SET_SELECTED_GUIDE', {
        guide: item
      })
      this.$router.push('/scenicGuideOrder')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.scenicGuideWrapper {
  .guideWrapper {
    .guideItem {  
        margin-bottom 10px
        display flex
        background-color white
        padding 10px 20px
        .imageWrapper {
            width 80px
            height 80px
            background-repeat: no-repeat; 
            background-size: cover;
        }
        .textWrapper {
            width 80%
            margin-left 20px
            .topGuide {
                display flex
                justify-content space-between
            }
            .rateWrapper {
                color $color-theme
                margin-right 6px
            }
            .guideDesc {
                color $color-text-3
                font-size 12px
                margin-top 5px
                p {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                }
            }
            .guidePrice {
                margin-top 10px
                display flex
                justify-content space-between
                .priceWrapper {
                    font-size 14px
                    color #ff9c00
                }
                .priceButton {
                    button {
                        color: $color-theme;
                        font-size 14px
                        padding 3px 15px
                        border: solid 1px #00ceb9;
                        border-radius 3px
                        background-color: #fff;
                        &:focus {
                            outline: none
                        }
                    }
                }
            }
        }
    }
  }
}
</style>

<style>
.textWrapper .vux-rater-inner {
    color: #00ceb9
}
</style>
